<template>
  <div class="case_num">
    <div class="container">
      <div class="title">
        <span>截止 {{CaseNumData.modifyTime | timeFilter}} 全国数据统计</span>
      </div>
    </div>
    <div class='num'>
        <ul class='count'>
            <li>
                <div class='create_item'>
                    <div class='create_count'>
                        <b>较昨日
                            <em style="color:rgb(247, 76, 49);">{{CaseNumData.currentConfirmedIncr | NumFilter}}</em>
                        </b>
                    </div>
                    <strong style="color: rgb(247, 76, 49);">{{CaseNumData.currentConfirmedCount}}</strong>
                    <span>现存确诊</span>
                </div>
            </li>
            <li>
                <div class='create_item'>
                    <div class='create_count'>
                        <b>较昨日
                            <em style="color: rgb(247, 130, 7);">{{CaseNumData.confirmedIncr | NumFilter}}</em>
                        </b>
                    </div>
                    <strong style="color: rgb(247, 130, 7);">{{CaseNumData.confirmedCount}}</strong>
                    <span>累计确诊</span>
                </div>
            </li>
            <li>
                <div class='create_item'>
                    <div class='create_count'>
                        <b>较昨日
                            <em style="color: rgb(162, 90, 78);">{{CaseNumData.suspectedIncr | NumFilter}}</em>
                        </b>
                    </div>
                    <strong style="color: rgb(162, 90, 78);">{{CaseNumData.suspectedCount}}</strong>
                    <span>累计境外输入</span>
                </div>
            </li>
            <li>
                <div class='create_item'>
                    <div class='create_count'>
                        <b>较昨日
                            <em style="color: rgb(174, 33, 44);">{{CaseNumData.curedIncr | NumFilter}}</em>
                        </b>
                    </div>
                    <strong style="color: rgb(174, 33, 44);">{{CaseNumData.curedCount}}</strong>
                    <span>累计治愈</span>
                </div>
            </li>
            <li>
                <div class='create_item'>
                    <div class='create_count'>
                        <b>较昨日
                            <em style="color: rgb(93, 112, 146);">{{CaseNumData.deadIncr}}</em>
                        </b>
                    </div>
                    <strong style="color: rgb(93, 112, 146);">{{CaseNumData.deadCount}}</strong>
                    <span>累计死亡</span>
                </div>
            </li>
            <li>
                <div class='create_item'>
                    <div class='create_count'>
                        <b>较昨日
                            <em style="color: rgb(40, 183, 163);">{{CaseNumData.seriousIncr | NumFilter}}</em>
                        </b>
                    </div>
                    <strong style="color: rgb(40, 183, 163);">{{CaseNumData.seriousCount}}</strong>
                    <span>现存无症状</span>
                </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import moment from 'moment'
moment.locale('zh-cn')
Vue.filter('timeFilter', (data) => {
  return moment(data).format('YYYY-M-D h:mm')
})
Vue.filter('NumFilter', (data) => {
  return data > 0 ? ('+' + data) : ('-' + data)
})
export default {
  props: {
    CaseNumData: {
      type: Object,
      default: () => { return {} }
    }
  }
}
</script>

<style lang="scss" scoped>
.case_num {
  padding: 16px;
  border:0.5px solid rgba(128, 128, 128, 0.186);
  .container {
    margin: -0.625rem 0 0;
    font-size: 12px;
    .title {
      padding: 8px 0 7px;
      span{
          color:#666
      }
    }
  }
  .num{
    position: relative;
    text-align: center;
    background: #fff;
    .count{
        display: flex;
        flex-flow: wrap;
        position: relative;
        margin: 0;
        padding: 8px 0 7px;
        li{
            margin:10px 0;
            width: 33.3%;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .create_item{
                .create_count{
                    font-size: 9px;
                    color:#666;
                    b{
                        em{
                            font-style: normal;
                            font-weight: 400;

                        }
                    }
                }
                strong{
                    line-height: 25px;
                    font-weight: 700px;
                    font-size: 20px;

                }
                span{
                    font-weight: bolder;
                    font-size: 11px;
                    display: block;
                    color:#333;
                    line-height: 15px;
                }
            }
        }
    }
    .count::after{
        content: "";
        display: block;
        position: absolute;
        top: -0.0625rem;
        left: -0.0625rem;
        width: 200%;
        height: 200%;
        transform-origin: 0 0;
        transform: scale(0.5);
        border: .0625rem solid #ebebeb;
        box-shadow: 0 .25rem .75rem 0 rgba(0,0,0,.05);
    }
  }
}
</style>
